<!--  -->
<template>
  <div class="container">
    <h1>{{userId==profile.userId?'我':profile.nickname}}的关注</h1>
    <el-row :gutter="40">
      <el-col v-for="(item,index) in list" :key="index" :span="8">
        <div  class="item">
          <div @click="toDetail(item.userId)" class="cover">
            <img :src="item.avatarUrl" alt="">
          </div>
          <div @click="toDetail(item.userId)" class="info">
            <div class="name">{{item.nickname}}</div>
            <div class="signature">{{item.signature?item.signature:""}}</div>
            <div class="count">
              <span class="song_list">歌单: {{item.playlistCount}}</span>
              <span>|</span>
              <span class="followeds">粉丝: {{item.followeds}}</span>
            </div>
          </div>
          <div class="pri_letter">
            <i class="iconfont el-icon-message">私信</i>
          </div>
        </div>
      </el-col>
    </el-row>

    <div v-if="count>60" class="pagination">
      <el-pagination background layout="prev, pager, next" :total="Math.ceil(count / 60) * 10" :pager-count="7" @current-change="getUserFollows" :current-page.sync="currentPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { getUserFollows, getUserInfo,getUserFollowsCount } from 'util/login'
export default {
  name: '',
  data() {
    return {
      currentPage: 1,
      count: 0,
      list: [],
      profile: {}
    }
  },
    computed: {
    ...mapGetters('userInfo', [
      //登录状态
      'loginStatus',
      'userId'
    ])
  },
  created() {
    this.getUserInfo()
    this.getUserFollows(1)
    this.getUserFollowsCount()
  },
  methods: {
    //获取用户信息
    async getUserInfo() {
      let { data } = await getUserInfo(this.$route.params.id)
      this.profile = data.profile
    },
    //获取关注列表
    async getUserFollows(page) {
      let { data } = await getUserFollows(this.$route.params.id, 60, (page - 1) * 60)
      this.list = data.follow
    },
    //获取数量
    async getUserFollowsCount(){
        let {data} = await getUserFollowsCount(this.$route.params.id,10000)
        this.count = data.follow.length
    },
    toDetail(id){
        this.$router.push('/userinfo/'+ id)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
}
h1 {
  font-size: 20px;
  margin-bottom: 20px;
}
.item:hover {
  background-color: #F9F9F9;
}
.item {
  cursor: pointer;
  color: #676767;
  padding: 5px 10px;
  height: 100px;
  width: 340px;
  display: flex;
  align-items: center;
  .cover {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-right: 6px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .info {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    .name {
      font-size: 14px;
      color: #373737;
    }
    .signature {
      width: 170px;
      font-size: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .count {
    font-size: 10px;
    span{
        padding: 0 5px;
    }
  }
  .pri_letter {
    border: 1px solid #d8d8d8;
    border-radius: 20px;
    width: 60px;
    text-align: center;
    font-size: 10px;
    padding: 3px;
    .iconfont {
      font-size: 10px;
    }
  }
  .pri_letter:hover {
    background-color: rgba(226, 219, 219, 0.274);
    color: #333;
  }
}
</style>